<template>
  <div class="user-info-container">
    <div class="my-course" @click="handleMyCourse">我的课程</div>
    <Notification />
    <ChatMessage />
    <div>
      <div class="user-detail">
        <el-dropdown trigger="click">
          <span class="dropdown-link">
            <div class="user-info">
              <el-avatar
                :size="40"
                :src="userInfo?.avatar"
                class="user-avatar"
              />
              <span class="username">{{ userInfo?.nickname }}</span>
              <el-icon><arrow-down /></el-icon>
            </div>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleProfile">
                <el-icon><user /></el-icon>个人中心
              </el-dropdown-item>
              <el-dropdown-item @click="handleMyReview">
                <el-icon><message /></el-icon>我的评论
              </el-dropdown-item>
              <el-dropdown-item @click="handleSetting">
                <el-icon><setting /></el-icon>账号设置
              </el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">
                <el-icon><switch-button /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { UserInfo } from "@/api/user";
import { useUserStore } from "@/store/modules/user";
import { localUtils } from "@/utils/local";
import { computed, watch } from "vue";
import { User, Setting, SwitchButton } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import Notification from "@/components/Notification.vue";
import ChatMessage from "@/components/ChatMessage.vue";
const router = useRouter();
const userStore = useUserStore();
const userInfo = computed(
  () => userStore.userInfo || localUtils.get<UserInfo>("userInfo")
);
const handleMyCourse = () => {
  router.push("/my-course");
};
const handleProfile = () => {
  router.push("/profile");
};
const handleMyReview = () => {
  router.push("/my-review");
};

const handleSetting = () => {
  router.push("/account/setting");
};

const handleLogout = () => {
  ElMessageBox.confirm("确定要退出登录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logout().then(() => {
        // 刷新页面,重新打开主页
        window.location.reload();
        window.location.href = "/";
      });
    })
    .catch(() => {});
};
</script>

<style scoped>
.user-info-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my-course {
  margin-right: 10px;
  font-size: 14px;
  color: #909399;
  cursor: pointer;
  font-weight: 500;
}
.my-course:hover {
  color: var(--el-color-primary);
}
.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 12px;
  height: 50px;
  border-radius: 25px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.user-avatar {
  margin-right: 20px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.user-detail {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-right: 5px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-link {
  display: flex;
  align-items: center;
  color: #909399;
  transition: color 0.3s;
}

.dropdown-link:hover {
  color: var(--el-color-primary);
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 8px;
  font-size: 16px;
}
</style>
